@import '../../containers/Application/colors.scss';

$backgroundColor: $white;
$progressColor: $shakespeare;
$progressColorError: $roman;
$progressColorWarning: $gold;
$progressColorSuccess: $mantis;

.progressBar {
    appearance: none;
    background-color: $backgroundColor;
    border: none;
    border-radius: 5px;
    height: 10px;
    max-width: 250px;
    overflow: hidden;
    width: 100%;

    --progress-color: $progressColor;

    &.error {
        --progress-color: $progressColorError;
    }

    &.warning {
        --progress-color: $progressColorWarning;
    }

    &.success {
        --progress-color: $progressColorSuccess;
    }

    &::-webkit-progress-bar {
        overflow: hidden;
        background-color: $backgroundColor;
    }

    &::-webkit-progress-value {
        background: var(--progress-color);
        transform: scale(1.05, 1.05);
    }

    &::-moz-progress-bar {
        background: var(--progress-color);
    }
}
